<template>
	<view>
		<view class="px-3 pt-3" style="padding-bottom: 180rpx;">
			<view class="bt-block">
				<bg-cell2 required label="身份证" :border="false"></bg-cell2>
				<bg-upload @uploadSuccess="(e) => { handleUpload(2, e) }" :value.sync="postData.idNationalSideUrl"
					class="px-3 my-3" coverPic="/static/images/ui/verify/card2.png" :count="1" key="idcard2"
					:isUpdate="isUpdate"></bg-upload>
				<bg-upload class="px-3" @uploadSuccess="(e) => { handleUpload(1, e) }"
					:value.sync="postData.idFaceSideUrl" coverPic="/static/images/ui/verify/card1.png" :count="1"
					key="idcard1" :isUpdate="isUpdate"></bg-upload>

			</view>
			<u--form errorType="toast" labelWidth="80" :labelStyle="{ fontSize: '28rpx' }" labelPosition="left"
				:model="postData" :rules="rules" ref="uForm">

				<view class="bt-block my-3 px-2">
					<u-form-item required label="姓名" prop="realName">
						<u--input v-model="postData.realName" border="none" inputAlign='right'></u--input>
					</u-form-item>
					<view class="bt-line-1"> </view>
					<u-form-item required label="性别" prop="gender">
						<view class="form-block">
							<bg-select :value.sync="postData.gender" :columns="dict.type.sys_user_sex"
								key="gender"></bg-select>
						</view>
					</u-form-item>
					<view class="bt-line-1"> </view>
					<u-form-item required label="身份证号" prop="idCardNo">
						<u--input v-model="postData.idCardNo" border="none" inputAlign='right' :disabled="false"
							disabledColor="#fff"></u--input>
					</u-form-item>
					<view class="bt-line-1"> </view>
					<u-form-item required label="期限" prop="idDeadline">
						<u--input v-model="postData.idDeadline" border="none" inputAlign='right'></u--input>
					</u-form-item>
					<view class="bt-line-1"> </view>
					<u-form-item required label="联系方式" prop="phone">
						<u--input v-model="postData.phone" border="none" inputAlign='right' disabled
							disabledColor="#fff"></u--input>
					</u-form-item>
					<view class="bt-line-1"> </view>
					<!-- <u-form-item required label="验证码" prop="code">
						<u-input type="number" v-model="postData.code" border="none" inputAlign='right'>
							<template slot="suffix">
								<view class="text-red" @click="startCode"> {{ tips }} </view>
							</template>
						</u-input>

						<u-code :seconds="60" ref="uCode" @change="codeChange" @end="end"
							unique-key="page-login"></u-code>
					</u-form-item> -->
					<view class="bt-line-1"> </view>
					<u-form-item required label="银行卡号" prop="bankCardNo">
						<u-input v-model="postData.bankCardNo" border="none" inputAlign='right'>
							<template slot="suffix">
								<view class="text-red" @click="scanBankCard"> 扫码识别 </view>
							</template>
						</u-input>
					</u-form-item>
					<view class="bt-line-1"> </view>
					<u-form-item required label="开户行" prop="bankName">
						<u--input v-model="postData.bankName" border="none" inputAlign='right'></u--input>
					</u-form-item>
					<view class="bt-line-1"> </view>
					<u-form-item label="选择角色" style="">
						<view class="form-block">
							<view style="flex: 1;" class="flex align-center justify-end" @click="roleShow = true">
								<text class="font-1 font-gray mr-1">{{ currentRole ? currentRole.label : '请选择角色'
								}}</text>
								<u-icon color="#bebebe" size="10"
									:name="roleShow ? 'arrow-up-fill' : 'arrow-down-fill'"></u-icon>
							</view>
						</view>

					</u-form-item>
					<!-- 选择岗位 -->
					<view class="bt-line-1"> </view>
					<u-form-item label="选择岗位">
						<view class="form-block">
							<view style="flex: 1;" class="flex align-center justify-end" @click="openPost()">
								<text class="font-1 font-gray mr-1">{{ currentPost ? currentPost.label : '请选择岗位'
								}}</text>
								<u-icon color="#bebebe" size="10"
									:name="postShow ? 'arrow-up-fill' : 'arrow-down-fill'"></u-icon>
							</view>

						</view>

					</u-form-item>
				</view>
				<view class="bt-block px-2">
					<u-form-item :required="has" label="职业证书/技能证书" labelWidth="240" labelPosition="left">
						<view class="w-100 flex justify-end">
							<view class="flex align-center mr-3" @click="checkHas(true)">
								<u--image v-if="has" src="/static/images/ui/verify/check.png" width="32rpx"
									height="32rpx"></u--image>
								<u--image v-else src="/static/images/ui/verify/uncheck.png" width="32rpx"
									height="32rpx"></u--image>
								<view class="ml-1">有</view>
							</view>
							<view class="flex align-center" @click="checkHas(false)">
								<u--image v-if="!has" src="/static/images/ui/verify/check.png" width="32rpx"
									height="32rpx"></u--image>
								<u--image v-else src="/static/images/ui/verify/uncheck.png" width="32rpx"
									height="32rpx"></u--image>
								<view class="ml-1">无</view>
							</view>
						</view>
					</u-form-item>
					<view class="mx-3 mb-3" v-if="has">
						<bg-upload key="skillCertUrl" :value.sync="postData.skillCertUrl" :count="9"></bg-upload>
					</view>

				</view>
				<view class="bt-block px-2 mt-3">
					<u-form-item labelWidth="80" required label="紧急联系人" prop="emergencyUserName">
						<u--input v-model="postData.emergencyUserName" border="none" inputAlign='right'></u--input>
					</u-form-item>
					<view class="bt-line-1"> </view>

					<u-form-item labelWidth="130" required label="紧急联系人关系" prop="emergencyType">
						<view class="form-block">
							<bg-select :value.sync="postData.emergencyType" :columns="dict.type.emergency_type"
								key="gender"></bg-select>
						</view>
					</u-form-item>
					<view class="bt-line-1"> </view>
					<u-form-item labelWidth="80" required label="联系人电话" prop="emergencyPhone">
						<u--input v-model="postData.emergencyPhone" border="none" inputAlign='right'></u--input>
					</u-form-item>

					<view class="bt-line-1"> </view>
					<u-form-item label="健康证明" labelWidth="200" labelPosition="top" prop="healthCertUrl">
						<bg-upload key="healthCertUrl" :value.sync="postData.healthCertUrl" class="mt-3"
							:count="9"></bg-upload>
					</u-form-item>
				</view>
			</u--form>
		</view>
		<view class="bt-footer">
			<bg-btn @click="saveData">保存</bg-btn>
		</view>
		<u-picker keyName="label" :closeOnClickOverlay="true" :show="roleShow"
			:columns="[[{ label: '工人', value: 1 }, { label: '管理员', value: 2 }]]" @close="roleShow = false"
			@cancel="roleShow = false" @confirm="onRoleShowConfirm"></u-picker>
		<u-picker keyName="label" :closeOnClickOverlay="true" :show="postShow" :columns="postList"
			@close="postShow = false" @cancel="postShow = false" @confirm="onPostShowConfirm"></u-picker>
	</view>
</template>

<script>
import {
	getCode,
	login
} from '@/api/login'
import {
	shotUpload,
	backShotUpload
} from '../../../utils/upload'
import {
	verifyRealName,
	idCardOcr,
	userInfo,
	updateVerifyRealName
} from "@/api/system/user.js"
export default {
	dicts: ["sys_user_sex", "emergency_type"],
	data() {
		return {
			has: false,
			tips: '',
			faceImg: null,
			nationImg: null,
			idCardCheck: false,
			postData: {
				"idFaceSideUrl": "",
				"idNationalSideUrl": "",
				"realName": "",
				"gender": "",
				"idCardNo": "",
				"idDeadline": "",
				"phone": "",
				// "code": "",
				"bankCardNo": "",
				"bankName": "",
				"emergencyType": "",
				"emergencyUserName": "",
				"emergencyPhone": "",
				"skillCertUrl": "",
				"healthCertUrl": "",
				"post": "",
			},
			rules: {
				// 'code': {
				// 	type: 'number',
				// 	required: true,
				// 	message: '请输入验证码',
				// 	trigger: ['blur', 'change']
				// },
				'idFaceSideUrl': {
					required: true,
					message: '请上传身份证正面',
					trigger: ['blur', 'change']
				},
				'idNationalSideUrl': {
					required: true,
					message: '请上传身份证反面',
					trigger: ['blur', 'change']
				},
				'realName': {
					required: true,
					message: '输入名字',
					trigger: ['blur', 'change']
				},
				'idCardNo': {
					required: true,
					message: '输入身份证号',
					trigger: ['blur', 'change']
				},
				'idDeadline': {
					required: true,
					message: '输入有效期',
					trigger: ['blur', 'change']
				},
				'phone': {
					required: true,
					message: '输入联系方式',
					trigger: ['blur', 'change']
				},
				'bankCardNo': {
					type: 'number',
					required: true,
					message: '请输入银行卡号',
					trigger: ['blur', 'change']
				},
				'bankName': {
					type: 'string',
					required: true,
					message: '请输入开户行',
					trigger: ['blur', 'change']
				},
				'emergencyUserName': {
					required: true,
					message: '输入紧急联系人',
					trigger: ['blur', 'change']
				},
				'emergencyPhone': {
					required: true,
					message: '输入联系人电话',
					trigger: ['blur', 'change']
				},
				'emergencyType': {
					required: true,
					message: '选择与联系人关系',
					trigger: ['blur', 'change']
				},
				'gender': {
					type: 'number',
					required: true,
					message: '请选择性别',
					trigger: ['blur', 'change']
				},
			},
			isUpdate: '', //1编辑 ''新增
			roleShow: false,
			currentRole: '',
			postShow: false,
			currentPost: '',
			postList: [[{ label: '项目管理员', value: '102' }, { label: '班组管理员', value: '103' }, { label: '安全管理员', value: '104' }, { label: '财务管理员', value: '106' }, { label: '高级管理员', value: '107' }]],
			disabledPost: false,
		}
	},
	mounted() { },
	onLoad(options) {
		if (options.isUpdate && options.isUpdate == 1) {
			this.isUpdate = options.isUpdate
			uni.setNavigationBarTitle({
				title: '修改实名认证'
			})
		}
		this.getUserInfo()
	},
	methods: {
		getUserInfo() {
			userInfo({
				userId: this.$store.getters.userId
			}).then(res => {
				if (this.isUpdate == 1) {
					let { post } = res.data
					this.postData = res.data
					let arr = [{ label: '项目管理员', value: '102' }, { label: '班组管理员', value: '103' }, { label: '安全管理员', value: '104' }, { label: '财务管理员', value: '106' }, { label: '高级管理员', value: '107' }]
					let find = arr.find(item => {
						return item.value == post
					})

					// 如果是工人身份 岗位id 105
					if (post == '105') {
						this.disabledPost = true
						this.postData.post = '105'
						this.currentRole = { label: '工人', value: 1 }
					} else {
						this.disabledPost = false
						this.currentRole = { label: '管理员', value: 2 }
						this.currentPost = find
						this.postData.post = post

					}

					console.log('this.postData', this.postData);
				}
				this.postData.phone = res.data.phone

			})
		},
		handleUpload(idx, e) {
			let img = null
			if (e.length > 0) {
				img = e[0].url
			}
			if (idx == 1) {
				this.faceImg = img
			} else {
				this.nationImg = img
			}
			if (this.faceImg && this.nationImg) {
				idCardOcr({
					"imageUrls": [this.faceImg, this.nationImg]
				}).then(res => {
					console.log(res)
					let _data = res.data
					this.postData.realName = _data.name
					this.postData.idCardNo = _data.idNumber
					this.postData.idDeadline = _data.validPeriod
					this.postData.gender = this.findSexByLabel(_data.sex)
				})
			}
		},
		findSexByLabel(sex) {
			let find = this.dict.type.sys_user_sex.find(item => {
				return item.label == sex
			})
			return find ? find.value : ''
		},
		checkHas(status) {
			this.has = status
		},
		startCode(text) {
			if (this.$refs.uCode.canGetCode) {
				if (!uni.$u.test.mobile(this.postData.phone)) {
					uni.$u.toast('请输入手机号');
					return false
				}
				// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码'
				})

				getCode(this.postData.phone).then(res => {
					uni.hideLoading();
					uni.$u.toast('验证码已发送');
					this.$refs.uCode.start();
				})
			} else {
				uni.$u.toast('倒计时结束后再发送');
			}
		},
		scanBankCard() {
			backShotUpload().then(res => {
				this.postData.bankName = res.data.bankName
				this.postData.bankCardNo = res.data.cardNumber
			})
		},
		async getCode() {
			let res = await getCode(this.postData.phone)
		},
		codeChange(e) {
			this.tips = e || "获取验证码"
		},
		end() { },
		saveData() {
			if (!this.postData.idFaceSideUrl) {
				this.$modal.msg("请上传身份证人像面")
				return false
			}
			if (!this.postData.idNationalSideUrl) {
				this.$modal.msg("请上传身份证国徽面")
				return false
			}
			if (this.has) {
				if (!this.postData.skillCertUrl) {
					this.$modal.msg("请上传职业证书/技能证书")
					return false
				}
			} else {
				this.postData.skillCertUrl = ''
			}
			this.$refs.uForm.validate().then(res => {
				if (this.isUpdate == 1) {
					// 编辑
					if (res) {
						updateVerifyRealName(this.postData).then(res => {
							this.$modal.msgSuccess("实名认证成功")
							uni.$emit("refresh-verify", true)
							uni.$emit("refresh-user", true)
							uni.$emit("refresh-card", true)
							// this.$tab.navigateBackDelay()
							this.$tab.switchTab('/pages/mine/index')
						})
					}
				} else {
					// 新增
					if (res) {
						verifyRealName(this.postData).then(res => {
							this.$modal.msgSuccess("实名认证成功")
							uni.$emit("refresh-verify", true)
							uni.$emit("refresh-user", true)
							this.$tab.navigateBackDelay()
						})
					}
				}

			})
		},
		onRoleShowConfirm(e) {
			console.log(e);

			this.currentRole = e.value[0]
			if (e.value[0].value == 1) {
				// 工人身份 岗位id 105
				this.postData.post = '105'
				this.disabledPost = true
				this.currentPost = ''
			} else {
				this.postData.post = ''
				this.disabledPost = false
			}
			this.roleShow = false
		},
		openPost() {
			if (this.disabledPost) return this.$modal.msg("工人身份不能选择岗位")
			this.postShow = true
		},
		onPostShowConfirm(e) {
			this.currentPost = e.value[0]
			this.postData.post = e.value[0].value
			this.postShow = false
		}
	}
}
</script>

<style></style>